var nameLine = [];
var valueLine = [];
var cols_arr = [];
var resized = false;
var myChart = null;

$(function() {
    searh();
    resizeWindow();
});

function resizeWindow() {
    if (resized) {
        return;
    }
    resized = true;
    window.setTimeout(function() {
        setPanelSize();
        resized = false;
    }, 100);
}

function setPanelSize() {
    var width = document.documentElement.clientWidth * 0.924;
    var height = document.documentElement.clientHeight * 0.856;

    $('#leftPanelDiv').css("width", (width / 3 - 10) + 'px');
    $('#leftPanelDiv').css("height", (height / 2) + 'px');

    $('#rightPanelDiv').css("width", (width * 2 / 3 - 5) + 'px');
    $('#rightPanelDiv').css("height", height + 5 + 'px');

    $('#matCheckChart').css("width", (width / 3 - 10) + 'px');
    $('#matCheckChart').css("height", (height / 2) + 'px');

    $('#layout_table').css("width", width - 3 + 'px');
    $('#layout_table').css("height", height + 'px');

    $('#leftPanel').css("width", (width / 3) + 'px');
    $('#leftPanel').css("height", (height / 2) + 'px');

    $('#rightPanel').css("width", (width * 2 / 3) + 'px');
    $('#rightPanel').css("height", height + 'px');

    $('#leftPanel2').css("width", (width / 3) + 'px');
    $('#leftPanel2').css("height", (height / 2) + 'px');

    if (myChart) {
        myChart.resize();
    } else {
        drawChart();
    }
}

function searh() {
    var myDate = new Date();
    cols_arr = [{'CODE':'G20191010009','DATE':myDate.toLocaleString(),'TIME':myDate.toLocaleString(),'STATUS':'待上架','QT_STATUS':'领夹板'},
        {'CODE':'G20191010008','DATE':myDate.toLocaleString(),'TIME':myDate.toLocaleString(),'STATUS':'上架完成','QT_STATUS':'准备就绪'},
        {'CODE':'G20191010007','DATE':myDate.toLocaleString(),'TIME':myDate.toLocaleString(),'STATUS':'待上架','QT_STATUS':'准备就绪'},
        {'CODE':'G20191010006','DATE':myDate.toLocaleString(),'TIME':myDate.toLocaleString(),'STATUS':'待上架','QT_STATUS':'准备就绪'},
        {'CODE':'G20191010005','DATE':myDate.toLocaleString(),'TIME':myDate.toLocaleString(),'STATUS':'待上架','QT_STATUS':'准备就绪'}];

    renderTable(cols_arr);
}
function drawChart() {
    if (!myChart) {
        myChart = echarts.init(document.getElementById('matCheckChart'));
    } else {
        myChart.clear();
    }
    $("#zhw").html('123'); //总货位数量
    $("#kxhw").html('134');//空闲货位数量
    $("#syhw").html('52');//使用货位数量
    $("#drx").html('461');//待入楦货位数量
    setEchartsPie(myChart, [
        { value: 160, name: '使用中' },
        { value: 120, name: '空闲' }
    ]);
}
function renderTable(cols_arr){
    if(cols_arr){
        var trHtml = [];
        for(var i in cols_arr) {
            trHtml.push("<tr>");
            trHtml.push("<td align='center' class='addTr_text'>" + cols_arr[i].CODE + "</td>");
            trHtml.push("<td align='center' class='addTr_text'>" + cols_arr[i].TIME + "</td>");
            trHtml.push("<td align='center' class='addTr_text'>" + cols_arr[i].STATUS + "</td>");
            trHtml.push("<td align='center' class='addTr_text'>" + cols_arr[i].QT_STATUS + "</td>");
            trHtml.push("</tr>");
        }
        trHtml = trHtml.join("");

        $("#addTr").after(trHtml);
    }
}
function setEchartsPie(id, data) {
    var dataName = [];
    var total = 0;
    data.forEach((res) => {
        dataName.push(res.name);
        total += parseFloat(res.value) * 10000;
    });
    total = total / 10000;
    var option = {
        title: {
            zlevel: 0,
            text:'立体库实时库存占比',
            x:"center",
        },
        tooltip: { // 悬停指示
            trigger: 'item',
            formatter: "{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'right',
            data: dataName,
            itemGap: 30,
            top: 'middle',
            align: 'left',
            icon: 'circle',
            formatter: function (name) {
                return name;
            }
        },
        series: [{
            name: '访问来源',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '45%'],
            //radius: ['80%', '84%'],
            center: ['50%', '50%'],
            stillShowZeroSum: false,
            avoidLabelOverlap: false,
            zlevel: 2,
            label: {
                normal: {
                    padding: [30, 30, 30, 30],
                    backgroundColor: '#fff',
                    show: false,
                    position: 'center',
                    formatter: [
                        '{value|{c}}',
                        '{name|{b}}'
                    ].join('\n'),
                    rich: {
                        value: {
                            color: '#303133',
                            fontSize: 40,
                            fontWeight: 'bold',
                            lineHeight: 40,
                        },
                        name: {
                            color: '#909399',
                            lineHeight: 20
                        },
                    },
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '22',
                        fontWeight: 'bold'
                    }
                }
            },
            data: data
        },
        {
            name: '仓库使用',
            type: 'pie',
            radius: ['55%', '70%'],
            label: {
                normal: {
                    formatter: '{b|{b}：}{c}',
                    backgroundColor: '#eee',
                    borderColor: '#ccc',
                    borderWidth: 1,
                    borderRadius: 4,
                    rich: {
                        a: {
                            color: '#999',
                            lineHeight: 30,
                            align: 'center'
                        },
                        hr: {
                            borderColor: '#aaa',
                            width: '100%',
                            borderWidth: 1,
                            height: 1
                        },
                        b: {
                            fontSize: 16,
                            fontWeight: 'bold',
                            lineHeight: 33
                        },
                        per: {
                            color: '#eee',
                            backgroundColor: '#334455',
                            padding: [4, 4, 4, 4],
                            borderRadius: 1
                        }
                    }
                }
            },
            data: data
        }],
        color: ['#F29930','#6295D7', '#D48265', '#2F4554', '#C23531']
    };
    id.setOption(option, true);
}
